import React from 'react'
import {ButtonIconPosition, ButtonSize, ButtonStyle} from './utils'
import {ThemeColor} from '../color/ThemeColor'
import Icon from '../icon/Icon'

interface ButtonProps {
  type?: 'submit' | 'button'
  color?: ThemeColor
  size?: ButtonSize
  style?: ButtonStyle
  onClick?: (evt?: any) => void
  className?: string
  disabled?: boolean
  iconPath?: string
  iconPosition?: ButtonIconPosition
  id?: string
  resizeInMobileResolution?: boolean
  hover?: 'light'

  isActive?: boolean
  title?: string
}

const Button: React.FC<ButtonProps> = ({
  id,
  type,
  color,
  size,
  style,
  onClick,
  className,
  disabled,
  iconPath,
  iconPosition,
  resizeInMobileResolution,
  hover,
  children,
  isActive,
  title,
}) => {
  let classNameResult = `btn ${color || 'primary'} ${size || 'md'} ${isActive ? 'is-active' : ''} ${
    iconPosition === 'right' ? 'icon-right' : 'icon-left'
  } ${resizeInMobileResolution ? 'resize-in-mobile' : ''} ${style || ''} ${
    hover ? 'hover-' + hover : ''
  } ${className || ''}`
  return (
    <button
      id={id}
      type={type ? type : 'button'}
      onClick={onClick}
      title={title}
      className={classNameResult}
      disabled={disabled}>
      <div className={'button-container'}>
        {iconPath && <Icon path={iconPath} />}
        <span className={'button-content'}>{children}</span>
      </div>
    </button>
  )
}

export {Button}
